<template>
  <div class="mod-config">
    <table-view ref="view"
                :searchAttrs="searchAttrs"
                :primaryKey="primaryKey"
                :listApiName="listApiName"
                :deleteApiName="deleteApiName"
                :saveAuthName="saveAuthName"
                :deleteAuthName="deleteAuthName"
                :optionWidth="200"
                :showAttrs="showAttrs"
    >
      <template v-slot:foot="{scope}">

        <el-tooltip  class="item" effect="dark" content="查看订单生产时间线" placement="bottom" :hide-after="1800" :open-delay="800">
          <el-button size="small" type="text" @click="openOrderTimeLineDialog(R.prop('row', scope))">
            时间线
          </el-button>
        </el-tooltip>

      </template>
    </table-view>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    <el-dialog
      title="查看产线排单生产计划时间线"
      :visible="orderTimeLineVisible"
      width="40%">

      <div class="block">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </div>


      <span slot="footer" class="dialog-footer">
        <el-button @click="orderTimeLineVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderTimeLineVisible=false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './productdevice-add-or-update'
import tableView from '@/components/tableView'
import basicMixins from '@/utils/commonViewMixins'

export default {
  mixins: [basicMixins],
  data() {
    return {
      searchAttrs: {},
      primaryKey: 'id',
      listApiName: 'productApi/listProductDevice',
      deleteApiName: 'productApi/deleteProductDevice',
      saveAuthName: 'product:productdevice:save',
      deleteAuthName: 'product:productdevice:delete',
      orderTimeLineVisible: false,
      showAttrs: {
        deviceName: {label: '光瓶生产厂商'},
        weightRange: {label: '克重范围'},
        notProduction : {label: '未生产'},
        processProduction : {label: '生产进行中'},
        finishProduction : {label: '生产完成'},
        productionDay : {label: '产线预计消化天数'},
        includeProcessDay : {label: '产线预计消化天数(包含进行中)'},
        remark: {label: '备注'}
      },
      activities: [{
        content: 'B203',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      },
        {
          content: 'DS001',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: 'DS002',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: 'DS003',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: 'DS004',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: 'DS005',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }

      ]
    }
  },
  components: {
    AddOrUpdate,
    tableView
  },
  methods:{
    openOrderTimeLineDialog() {
      this.orderTimeLineVisible=true
    }
  }
}
</script>
